<!DOCTYPE html>

<html>
    <head>
        <title>拖动组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>

    </head>
    <body>
        <div class="wrapper">
            <h2>draggable</h2>
            <fieldset>
                <legend>拖拽组件</legend>
                让一个定位元素可以拖动。使用时在目标元素上添加ms-draggable绑定属性，值可以为空。值不为空时，有两个可选设置项，用逗号隔开。
                第一个用于指放置配置对象的VM的$id，为$或不存在时默认为离它最近的VM。第二个用于指定配置对象。
            </fieldset>
            <fieldset>
                <legend>使用说明</legend>
                <table class="table-doc">
                    <col width="180"/>
                    <col width="180"/>
                    <tr>
                        <th>名字</th><th>默认值</th> <th>说明</th>
                    </tr>
                    <tr>
                        <td colspan="3" aligin="center">配置参数</td>
                    </tr>
                    <tr>
                        <td>axis</td>
                        <td>"xy"</td> 
                        <td>决定拖动方向， x是水平， y是垂直，xy是任意，此外的其他值都会转换为xy</td>
                    </tr>
                    <tr>
                        <td>ghosting</td>
                        <td>false</td> 
                        <td>影子拖动，指拖动时不拖动原元素，而是动态生成一个与原元素相同大小的半透明元素做替身，在拖动结束再决位到替身的位置上。
                            用于拖动复杂的目标节省性能
                        </td>
                    </tr>
                    <tr>
                        <td>handle</td>
                        <td>空函数</td> 
                        <td>手柄拖动，用于拖动原元素的某一部分就能拖动整体，因此这函数要求返回一个元素节点，此元素节点应该位于拖动元素内部。此函数有两个参数
                            分别是事件对象与data对象，this指向拖动元素
                        </td>
                    </tr>
                    <tr>
                        <td>containment</td>
                        <td></td> 
                        <td>区域拖动，可以是window, parent, #id, [0, 0, 400, 300]这些格式。
                            window是指在当前可视区拖动， parent是指当前父元素， #id是用于取得目标元素，
                            拥有4个数字的数组是用于圈定范围，前两个数字是左上角的坐标，后两个是右下角的坐标
                        </td>
                    </tr>
                    <tr>
                        <td>beforeStart(e, data)</td>
                        <td>空函数</td> 
                        <td>鼠标按下时立即触发的回调，它的参数与this参考handle。你可以在这里设置拖动范围与改变元素样式。
                        </td>
                    </tr>
                    <tr>
                        <td>start(e, data)</td>
                        <td>空函数</td> 
                        <td>紧接着beforeStart，handle触发的回调，它的参数与this参考handle
                        </td>
                    </tr>
                    <tr>
                        <td>drag(e, data)</td>
                        <td>空函数</td> 
                        <td>鼠标拖动（mousemove或touchmove）连续触发的回调，它的参数与this参考handle
                        </td>
                    </tr>
                    <tr>
                        <td>beforeStop(e, data)</td>
                        <td>空函数</td> 
                        <td>鼠标弹起后立即触发的回调，它的参数与this参考handle。你可以在恢复样式，或改变data的一些属性
                        </td>
                    </tr>
                    <tr>
                        <td>stop(e, data)</td>
                        <td>空函数</td> 
                        <td>拖放结束后执行的回调，它的参数与this参考handle。
                        </td>
                    </tr>
                </table>
                <h3>各种回调的执行顺序：</h3>
                <p>beforeStart --&gt; handle --&gt;  start --&gt;  drag --&gt;  beforeStop --&gt; stop </p>
                <h3>上述各种回调提到的data对象所包含的数据（★表示这些东西比较重要）</h3>
                <table class="table-doc">
                    <tr>
                        <th>名称</th> <th>默认值</th><th>说明</th>
                    </tr>
                    <tr>
                        <td>★element</td> <td></td> <td>要拖动的元素节点</td>
                    </tr>
                    <tr>
                        <td>$element</td> <td></td>  <td>用avalon封装好element  --> avalon(element)</td>
                    </tr>
                    <tr>
                        <td>★clone</td> <td></td> <td>影子拖动时，复制生成的元素节点</td>
                    </tr>
                    <tr>
                        <td>started</td> <td>false</td> <td>是否已经在拖动</td>
                    </tr>
                    <tr>
                        <td>★pageX/pageY</td> <td>0</td> <td>当前元素在页面的坐标（这两个会在mousemove中改变）</td>
                    </tr>
                    <tr>
                        <td>startPageX/startPageY</td> <td>0</td> <td>开始拖动时元素在页面的坐标</td>
                    </tr>
                    <tr>
                        <td>★dragX/dragY</td>  <td>true</td><td>是否在鼠标拖动时，将pageX/pageY赋给元素的left, top来改变它的位置</td>
                    </tr>
                    <tr>
                        <td>clickX/clickY</td> <td>0</td> <td>鼠标点击的位置与目标元素左上角的距离</td>
                    </tr>
                    <tr>
                        <td>startLeft/startTop</td> <td>0</td> <td>拖动前相对于offsetParent的坐标</td>
                    </tr>
                    <tr>
                        <td>endLeft/endTop</td> <td>0</td> <td>拖动后相对于offsetParent的坐标</td>
                    </tr>
                    <tr>
                        <td>endX/endY</td> <td>0</td> <td>拖动后相对于offsetParent的坐标</td>
                    </tr>
                    <tr>
                        <td>marginLeft/marginTop</td> <td>0</td> <td>开始拖动时元素的左上边距宽度</td>
                    </tr>
                </table>
            </fieldset>
            <ul class="example-links">
                <li><a href="avalon.draggable.ex1.html">简单例子</a></li>
                <li><a href="avalon.draggable.ex2.html">方向的限制</a></li>
                <li><a href="avalon.draggable.ex3.html">区域拖动</a></li>
                <li><a href="avalon.draggable.ex4.html">影子拖动</a></li>
                <li><a href="avalon.draggable.ex5.html">手柄拖动</a></li>
                <li><a href="avalon.draggable.ex6.html">各种回调</a></li>
            </ul>
        </div>


    </body>
</html>
